<template>
  <div id="app">
    <div  class="header">
      <div class="search-wrapper">
        <div class="logo">
          <span class="icon"></span>
          <span class="name">LIN RONG TU</span>
        </div>
        <div class="search">
          <input placeholder="请输入..."/>
          <span><button>查找</button></span>
        </div>
      </div>
      <div class="nav-wrapper">
        <v-navbar></v-navbar>
      </div>
    </div>
    <div class="main" role="main">
      <div class="content-wrapper">
        <routerView/>
      </div>
    </div>
    <div>
    </div>
  </div >
</template>

<script>
import navbar from './components/navbar/navbar'
/* eslint-disable */
export default {
  name: 'App',
  data () {
    return {
    }
  },
  components: {
    'v-navbar': navbar
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
html,body
  height: 100%
  width: 100%
  #app
    height: 100%
    width: 100%
  .header
    .search-wrapper
      width: 100%
      display: flex
      margin-bottom: 12px
      padding-top: 20px
      align-items: center
      .logo
        display: flex
        padding: 0 20px
        flex: 3
        .icon
          flex: 1
          width: 34px
          height: 34px
          background: url("./assets/logo.png")
          background-repeat: no-repeat
          background-size: 34px 34px
        .name
          flex: 4
          margin-left: 12px
          color: #42b983
          font-size: 24px
      .search
        font-size: 12px
        flex: 1
    .nav-wrapper
      height: 100%
      width: 100%
      .nav-item
        font-size: 16px
        color: black
  .main
    .content-wrapper
      word-break: break-word
      position: relative
      background: rgba(7, 17, 27, .1)
  .background
    position: fixed
    left: 0
    top: 0
    z-index: -100
    filter: blur(5px)
    opacity: 0.3
    background: url("./assets/images/green.jpg")
    width: 100%
    height: 100%
    background-size: 100% 100%
</style>
